<template>
	<view class="container">
		<view class="order">
			<view class="title">
				订单号：{{list.orderid}}
				<view class="status" :style="{'background-color':statusBgColor,'color':statusColor}">
					{{statusText}}
				</view>
			</view>
			<view class="box">
				<view class="item flexCenter">
					<view class="left">
						所属公司
					</view>
					<view class="right">
						{{list.companyName}}
					</view>
				</view>
				<view class="item flexCenter">
					<view class="left">
						下单时间
					</view>
					<view class="right">
						{{list.createTime}}
					</view>
				</view>
				<view class="item flexCenter">
					<view class="left">
						预计分佣
					</view>
					<view class="right money">
						￥{{list.yugufenyong}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				default:[]
			}
		},
		data() {
			return {

			};
		},
		computed:{
			statusText(){
				if(this.list.cancel==1){
					return "进行中"
				}
				if(this.list.cancel==2){
					return "已完成"
				}
				if(this.list.cancel==3){
					return "已取消"
				}
			},
			statusColor(){
				if(this.list.cancel==1){
					return "rgba(255, 136, 0, 1)"
				}
				if(this.list.cancel==2){
					return "rgba(66, 154, 254, 1)"
				}
				if(this.list.cancel==3){
					return "rgba(155, 152, 146, 1)"
				}
			},
			statusBgColor(){
				if(this.list.cancel==1){
					return "rgba(255, 136, 0, 0.2)"
				}
				if(this.list.cancel==2){
					return "rgba(66, 154, 254, 0.2)"
				}
				if(this.list.cancel==3){
					return "rgba(155, 152, 146, 0.2)"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-bottom: 20rpx;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #060A31;
			padding: 26rpx 0 22rpx 20rpx;
			position: relative;
			border-bottom: 1px solid #F1F1F1;

			.status {
				position: absolute;
				right: 0;
				top: 0;
				height: 48rpx;
				// background: rgba(255, 178, 0, 0.2);
				border-radius: 0rpx 12rpx 0rpx 16rpx;
				padding: 9rpx 16rpx 6rpx 22rpx;

				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				// color: #FF8800;
			}
		}

		.box {
			padding: 27rpx 0 0 20rpx;

			.item {
				margin-bottom: 14rpx;

				&:last-of-type {
					margin-bottom: 43rpx;
				}

				.left {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #8E909A;
					margin-right: 24rpx;
				}

				.right {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #060A31;
				}

				.money {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FE2C1D;
				}
			}
		}
	}
</style>